<!-- filepath: c:\Users\HH\Desktop\旅游服务平台\src\components\Header.vue -->
<template>
  <el-header class="header" :class="{ 'header-scrolled': isScrolled }">
    <div class="container header-container">
      <!-- <div class="logo">
        <el-icon class="logo-icon" src="@/assets/image.png"></el-icon>
        <router-link to="/" class="logo">汉中旅游</router-link>
      </div> -->
      <div class="logo">
  <img src="@/assets/image.png" alt="logo" class="logo-icon" style="height: 50px;width:90px ;">
  <router-link to="/" class="logo">汉中文旅</router-link>
</div>

      <nav class="nav-menu" :class="{ active: showMobileMenu }">
        <el-menu
          :default-active="activeIndex"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          class="main-menu"
        >
          <template v-for="item in menuItems">
            <el-sub-menu v-if="item.children" :index="item.index" :key="'submenu-' + item.index">
              <template #title>{{ item.title }}</template>
              <el-menu-item v-for="sub in item.children" :key="'submenu-' + item.index + '-' + sub.index" :index="sub.index">{{ sub.title }}</el-menu-item>
            </el-sub-menu>
            <el-menu-item v-else :key="'item-' + item.index" :index="item.index">{{ item.title }}</el-menu-item>
          </template>
        </el-menu>
      </nav>

      <div class="nav-buttons">
        <template v-if="isLoggedIn">
          <el-dropdown>
            <span class="el-dropdown-link user-name-large">
              <el-avatar :src="user.avatar || 'default-avatar.png'" :size="32" />
              {{ user.name || user.username || '用户' }}
              <el-icon><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="$router.push('/user/profile')">个人中心</el-dropdown-item>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        <template v-else>
          <el-button type="primary" @click="$router.push('/login')">登录</el-button>
        </template>
        <div class="mobile-menu-btn" @click="toggleMobileMenu">
          <el-icon v-if="!showMobileMenu"><Menu /></el-icon>
          <el-icon v-else><Close /></el-icon>
        </div>
      </div>
    </div>
  </el-header>
</template>

<script>
export default {
  name: "HeaderNav",
  data() {
    return {
      activeIndex: "1",
      showMobileMenu: false,
      isScrolled: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll );
    this.initActiveMenu();
    // 监听路由变化关闭菜单
    this.$router.afterEach(() => {
      this.showMobileMenu = false;
      document.body.style.overflow = "";
    });
    // 监听用户登录状态变化
    window.addEventListener('userLoginStatusChanged', this.handleLoginStatusChange);
  },
  beforeUnmount() {
    // 清理事件监听器
    window.removeEventListener('userLoginStatusChanged', this.handleLoginStatusChange);
  },
  computed: {
    isLoggedIn() {
      return !!localStorage.getItem('user');
    },
    user() {
      return JSON.parse(localStorage.getItem('user')) || {};
    },
    menuItems() {
      const items = [
        { index: "1", title: "首页", path: "/" },
        { index: "2", title: "目的地", path: "/destinations" },
        { index: "3", title: "旅游攻略", path: "/routes" },
        // 只有登录时才显示
        ...(this.isLoggedIn ? [
          { index: "4", title: "私人定制", path: "/customize" },
          { index: "7", title: "预约咨询", path: "/consult" }
        ] : []),
        // 合并旅途故事
        {
          index: "9",
          title: "旅途故事",
          children: [
            { index: "9-1", title: "发布故事", path: "/story/publish" },
            { index: "9-2", title: "故事列表", path: "/stories" }
          ]
        },
        { index: "6", title: "地图导航", path: "/new-page" },
      ];
      return items;
    }
  },
  methods: {
    initActiveMenu() {
      const currentPath = this.$route?.path || "/";
      const currentItem = this.menuItems.find(
        (item) => item.path === currentPath
      );
      if (currentItem) {
        this.activeIndex = currentItem.index;
      }
    },
    handleSelect(key) {
      // 查找一级或二级菜单
      let selectedItem = this.menuItems.find(item => item.index === key);
      if (!selectedItem) {
        for (const item of this.menuItems) {
          if (item.children) {
            selectedItem = item.children.find(sub => sub.index === key);
            if (selectedItem) break;
          }
        }
      }
      if (selectedItem) {
        if (selectedItem.action) {
          selectedItem.action();
        } else {
          this.$router.push(selectedItem.path);
        }
      }
      this.showMobileMenu = false;
    },
    toggleMobileMenu() {
      this.showMobileMenu = !this.showMobileMenu;
      document.body.style.overflow = this.showMobileMenu ? "hidden" : "";
    },
    handleScroll() {
      this.isScrolled = window.scrollY > 50;
    },
    handleLogout() {
      localStorage.removeItem('user');
      // 触发全局事件，通知其他组件更新
      window.dispatchEvent(new CustomEvent('userLoginStatusChanged'));
      this.$router.push('/login');
      location.reload();
    },
    handleLoginStatusChange() {
      // 强制更新组件，触发重新渲染
      this.$forceUpdate();
    }
  }
}
</script>

<style scoped>
.header {
  position: fixed; /* 改为 fixed 定位 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 60px; /* 修改导航栏高度 */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.header-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  font-size: 1.5rem; /* 调小logo字体 */
  font-weight: 700;
  background: linear-gradient(45deg, var(--primary-color), #36cfc9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}

.logo-icon {
  font-size: 1.5rem; /* 调小图标大小 */
}

.main-menu {
  border: none;
  background: transparent;
}

/* 统一所有一级菜单和二级菜单字体大小、粗细、间距 */
.el-menu-item,
.el-sub-menu__title,
.el-menu--popup .el-menu-item {
  font-size: 1.08rem;
  font-weight: 500;
  color: #222;
  height: 60px;
  line-height: 60px;
  padding: 0 28px;
  letter-spacing: 1px;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: color 0.2s, background 0.2s;
  margin: 0;
}
.el-menu-item:hover,
.el-menu-item.is-active,
.el-sub-menu__title:hover,
.el-sub-menu.is-active > .el-sub-menu__title,
.el-menu--popup .el-menu-item:hover,
.el-menu--popup .el-menu-item.is-active {
  color: var(--primary-color) !important;
  background: transparent !important;
  font-weight: 600;
  box-shadow: none;
}

/* 移除图标相关样式 */
.el-menu-item .el-icon {
  display: none;
}

.el-menu-item.is-active {
  color: var(--primary-color) !important;
  font-weight: 600;
}

.nav-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-buttons .el-button {
  padding: 8px 20px; /* 调整按钮大小 */
  font-weight: 500;
  border-radius: 24px;
  transition: var(--transition);
}

.mobile-menu-btn {
  display: none;
  font-size: 24px;
  cursor: pointer;
}

@media (max-width: 992px) {
  .nav-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-height));
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .main-menu {
    flex-direction: column;
    width: 100%;
    border: none;
  }

  .el-menu-item {
    text-align: center;
    height: 50px;
    line-height: 50px;
    margin: 5px 0;
    border-radius: var(--border-radius);
  }

  .el-menu-item:hover,
  .el-menu-item.is-active {
    background: var(--light-bg);
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 24px;
    cursor: pointer;
    margin-left: 15px;
    border-radius: 50%;
    transition: background-color 0.3s;
  }

  .mobile-menu-btn:hover {
    background: var(--light-bg);
  }
}

@media (max-width: 576px) {
  .header {
    height: var(--header-height-mobile);
  }

  .logo {
    font-size: 1.2rem;
  }

  .nav-menu {
    top: var(--header-height-mobile);
    height: calc(100vh - var(--header-height-mobile));
  }

  .nav-buttons .el-button {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .mobile-menu-btn {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

.header {
  height: var(--header-height);
}

@media (max-width: 768px) {
  .header {
    height: var(--header-height-mobile);
  }

  .nav-menu {
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 999;
    padding: 20px 0;
    overflow-y: auto;
  }

  .nav-menu.active {
    transform: translateX(0);
  }

  .nav-buttons .el-button {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .mobile-menu-btn {
    margin-left: 10px;
  }

  .logo {
    font-size: 1.2rem;
  }
}

/* 下拉菜单无边框、无阴影、纯白背景 */
::v-deep(.el-dropdown),
::v-deep(.el-dropdown-menu),
::v-deep(.el-dropdown-menu:focus),
::v-deep(.el-dropdown-menu:active),
::v-deep(.el-dropdown-menu:visited),
::v-deep(.el-dropdown-menu__item:focus),
::v-deep(.el-dropdown-menu__item:active) {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: #fff !important;
}

.user-name-large {
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
}

/* 二级菜单样式可适当微调 */
.el-menu--popup {
  min-width: 140px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.el-menu--popup .el-menu-item {
  font-size: 1rem;
  font-weight: 500;
  color: #222;
  height: 60px;
  line-height: 60px;
  padding: 0 28px;
  letter-spacing: 1px;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: color 0.2s, background 0.2s;
  margin: 0;
}
.el-menu--popup .el-menu-item:hover,
.el-menu--popup .el-menu-item.is-active {
  color: var(--primary-color) !important;
  background: transparent !important;
  font-weight: 600;
  box-shadow: none;
}

.el-menu-item.is-logout {
  color: #f56c6c !important;
}
</style>